import { Upload, Modal, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import React, { Component } from 'react'
import { deleteimg } from '../../api'


function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default class updateimg extends Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: []
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ file, fileList }) => {
    if (file.status === 'done') {
      const result = file.response
      if (result.status === 0) {
        message.success('上传成功')
        const { name, url } = result.data
        file = fileList[fileList.length - 1]
        file.name = name
        file.url = url
      } else {
        message.error('上传失败')
      }
    }
    this.setState({ fileList }
    )
  };
  handleRemove = async (file) => {
    const { isAdd } = this.props
    if (isAdd === undefined) {
      const result = await deleteimg(file.name)
      if (result.status === 0) {
        message.success('删除成功')
        return true
      } else {
        message.error('删除失败')
        return false
      }
    } else {
      message.success('温馨提示：提交后才能真正删除图片！')
      return true
    }
  }
  getimgs = () => {
    return this.state.fileList.map(file => file.name)
  }
  componentDidMount() {
    if (this.props.imgs !== undefined) {
      const fileList = this.props.imgs.map((img, key) => {
        return { uid: key, name: img, status: 'done', url: 'http://localhost:5000/upload/' + img }
      })
      this.setState({ fileList })
    }
  }

  render() {

    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        <Upload
          accept='image/*'
          action="/manage/img/upload"
          name='image'
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          onRemove={this.handleRemove}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}